<template>
  <div>
    <div class="shopSwitch">
      <div class="shopSwitch__text">
        您已开启积分商城功能。开启积分商城后会员可利用在您店铺累积的积分兑换特定商品或优惠券,您需要发布商品或优惠券
        并进行积分价格、可兑换数量、限兑数量的设置。
        <div class="shopSwitch__text--point">
          注意：会员兑换时，根据商品情况，需要或不需要支付运费
        </div>
      </div>
      <el-switch
        v-model="switchCheck"
        active-color="#3399FF"
        inactive-color="#DCDFE6"
        @change="changeCheck"
      ></el-switch>
    </div>
    <el-tabs v-model="comName" @tab-click="handleClick">
      <el-tab-pane label="积分商品" name="IntegralPro"></el-tab-pane>
      <el-tab-pane label="积分订单" name="integralOrder"></el-tab-pane>
      <el-tab-pane label="积分规则" name="IntegralRule"></el-tab-pane>
      <el-tab-pane label="活动说明" name="IntegralExp"></el-tab-pane>
    </el-tabs>
    <component :is="comName"></component>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import IntegralPro from "./integralPro/Index.vue";
import integralOrder from "./integralOrder/Index.vue";
import IntegralRule from "./integralRule/Index.vue";
import IntegralExp from "./integralExp/Index.vue";

import { getShopMsg } from "@/api/index";
import { takeOnOff } from "@/api/integral/integral";

@Component({
  components: {
    IntegralPro,
    integralOrder,
    IntegralRule,
    IntegralExp,
  },
})
export default class IntegralMall extends Vue {
  /** 顶部控制开关 */
  switchCheck = false;

  /** 组件名称 */
  comName = "IntegralPro";

  /**
   * 切换组件
   */
  handleClick(tab) {
    this.comName = tab.name;
  }

  mounted() {
    this.getSwitchCheck();
    if (this.$route.params.type === "deliver") {
      this.comName = "integralOrder";
    }
  }

  /**
   * 获取积分商城状态
   */
  async getSwitchCheck() {
    const res = await getShopMsg({});
    this.switchCheck = res.data.type;
  }

  /**
   * 开启/关闭积分商城
   */
  async changeCheck() {
    const param = {
      status: this.switchCheck ? 1 : 0,
    };
    await takeOnOff(param);

    this.getSwitchCheck();
  }
}
</script>

<style lang="scss" scoped>
@include b(shopSwitch) {
  width: 100%;
  height: 100px;
  padding: 20px;
  background-color: #ebf6ff;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  @include e(text) {
    width: 90%;
    @include m(point) {
      margin-top: 10px;
      color: #ff0000;
    }
  }
}
</style>
